<template>
    <div class="todo-container">
        <div class="todo-wrap">
            <MyHead @addTodo="addTodo" />
            <!-- <MyList :todoList="todoList" :changeDone="changeDone" :deleteTodo="deleteTodo"/> -->
            <MyList :todoList="todoList" />
            <MyFoot :todoList="todoList" @dropDone="dropDone" />
        </div>
    </div>
</template>

<script>
import pubsub from "pubsub-js"  //需要安装 pubsub-js库
import MyFoot from "./MyFoot"
import MyHead from "./MyHead";
import MyList from "./MyList";
export default {
    name: "TodoListApp",
    components: {
        MyHead,
        MyList,
        MyFoot,
    },
    data() {
        return {
            //如果 JSON.parse 返回的是 个null, 则将[] 给赋给todoList
            todoList: JSON.parse(localStorage.getItem('todos')) || [],
        };
    },
    methods: {
        addTodo(thing) {
            this.todoList.unshift(thing);
        },
        //复先框改变
        changeDone(id) {
            this.todoList.forEach(todo => {
                if (todo.id === id) {
                    todo.done = !todo.done;
                }
            })
        },
        //删除 使用发布订阅时，回调第一个参数是发布订阅的名称，第二个开始才是实际的参数，因此用_ 方式代替第一个参数
        deleteTodo(_, id) {
            this.todoList = this.todoList.filter(todo => { return todo.id != id })
        },
        //删除已经完成的任务
        dropDone() {
            this.todoList = this.todoList.filter(todo => todo.done === false)
        },
        //更新todoList中的值
        updateTodo(id, changeTitle) {
            this.todoList.forEach(m => {
                if (m.id === id) {
                    m.title = changeTitle
                }
            })
        },

    },
    watch: {
        todoList: {
            deep: true,
            handler(val) {
                localStorage.setItem('todos', JSON.stringify(val));
            }
        }
    },
    mounted() {
        this.$bus.$on('changeDone', this.changeDone)
        this.$bus.$on('updateTodo', this.updateTodo)
        //this.$bus.$on('deleteTodo',this.deleteTodo)
        this.pubId = pubsub.subscribe('deleteTodo', this.deleteTodo)  //使用订阅方式

    },
    beforeDestroy() {
        this.$bus.$off('changeDone') //解除绑定
        this.$bus.$off('updateTodo')
        //this.$bus.$off('deleteTodo')
        pubsub.unsubscribe('deleteTodo', this.pubId)  //取消订阅
    }
}
</script>

<style scoped>
/*base*/
body {
    background: #fff;
}

.btn {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.btn-danger {
    color: #fff;
    background-color: #da4f49;
    border: 1px solid #bd362f;
}

.btn-edit {
    color: #fff;
    background-color: #50c8e6;
    border: 1px solid #3638c7;
    margin-right: 5px;
}

.btn-danger:hover {
    color: #fff;
    background-color: #bd362f;
}

.btn:focus {
    outline: none;
}

.todo-container {
    width: 600px;
    margin: 0 auto;
}

.todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}
</style>